<template>
    <subBox v-loading="loading">
        <breadcrumb :title="'新增数据源'"></breadcrumb>
        <div class="mt20 add">
            <div class="add white-block">
                <el-form class="form-common" :model="form" :rules="rules" ref="ruleForm"
                         size="small" label-width="120px" :label-position="'left'">
                    <el-form-item label="数据源名称：" prop="dataName">
                        <el-input v-model="form.dataName" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="数据库类型：">
                        <el-select v-model="value" class="full" size="small">
                            <el-option
                                v-for="item in option"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="服务器地址：" prop="serAddress">
                        <el-input v-model="form.serAddress" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="端口：" prop="port">
                        <el-input v-model="form.port" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="数据库名称：" prop="dbName">
                        <el-input v-model="form.dbName" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名：" prop="user">
                        <el-input v-model="form.user" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：" prop="password">
                        <el-input v-model="form.password" size="small"></el-input>
                    </el-form-item>
                    <div class="mt20 text-center btn">
                        <el-button type="primary" size="small" class="vast" @click="test">链接测试</el-button>
                        <el-button type="primary" size="small" class="vast" @click="save">保存</el-button>
                        <el-button type="primary" size="small" class="vast" @click="close">关闭</el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </subBox>

</template>

<script>
    import subBox from '../../components/layout/layout-sub'
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'

    export default {
        data() {
            return {
                loading: false,
                form: {
                    dataName: '',
                    serAddress: '',
                    port: '',
                    dbName: '',
                    user: '',
                    password: ''
                },
                option: [
                    // {
                    //     value: '',
                    //     label: '数据库类型'
                    // },
                    {
                        value: 'MYSQL',
                        label: 'MYSQL'
                    },
                    {
                        value: 'ORACLE',
                        label: 'ORACLE'
                    }
                ],
                value: 'MYSQL',
                rules: {
                    dataName: [
                        {required: true, message: '请输入数据源名称', trigger: 'blur'}
                    ],
                    serAddress: [
                        {required: true, message: '请输入服务器地址', trigger: 'blur'}
                    ],
                    port: [
                        {required: true, message: '请输入端口', trigger: 'blur'}
                    ],
                    dbName: [
                        {required: true, message: '请输入数据库名称', trigger: 'blur'}
                    ],
                    user: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ]
                },
                index: ''
            }
        },
        mounted() {
        },
        methods: {
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            save() {
                this.validate('ruleForm', () => {
                    this.$http.post('/rdDbDict/saveDatabase', {
                        dbDesc: this.form.dataName,
                        dbIp: this.form.serAddress,
                        dbName: this.form.dbName,
                        dbPasswd: this.form.password,
                        dbUser: this.form.user,
                        dbType: this.value,
                        dbPort: this.form.port
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '新增成功!'
                            })
                            this.form = {}
                            this.$emit('upload')
                            this.$method.historyBack()
                        }
                    })
                })
            },
            test() {
                this.$http.get('/rdDbDict/checkDatabase', {
                    dbDesc: this.form.dataName,
                    dbIp: this.form.serAddress,
                    dbName: this.form.dbName,
                    dbPasswd: this.form.password,
                    dbUser: this.form.user,
                    dbType: this.value,
                    dbPort: this.form.port
                }).then(result => {
                    if (result.success) {
                        if (result.message === 'ok') {
                            this.$alert(result.data, {
                                dangerouslyUseHTMLString: true
                            })
                        }
                    }
                })
            },
            close() {
                this.form = {}
                // this.$router.back(-1)
                this.$emit('upload')
                this.$method.historyBack()
                this.$refs.ruleForm.resetFields()
            }
        },
        components: {
            subBox,
            breadcrumb,
            tableExample
        }
    }
</script>

<style scoped lang="less">
    .add {
        /*height: calc(100% - 50px);*/

        .form-common {
            margin-top: 3rem;

            .el-form-item {
                width: 40%;
                vertical-align: top;
                margin-left: 27%;
            }

            .btn {
                margin-top: 3rem;
            }
        }
    }

</style>
